<template>
  <div class="roleManagement-container">
    <el-container style="height: 1000px; border: 1px solid #eee">
      <el-header>
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col>
            <el-button icon="el-icon-arrow-left">返回</el-button>
          </el-col>

          <el-col style="text-align: right; font-size: 12px">
            <el-button icon="el-icon-upload2" @click="release">发布</el-button>

            <el-dropdown>
              <i
                class="el-icon-setting"
                style="margin-left: 15px; margin-right: 15px"
              ></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>查看</el-dropdown-item>
                <el-dropdown-item>新增</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span></span>
          </el-col>
        </el-row>
      </el-header>

      <el-container style="height: inherit">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <div
            style="height: 1px; width: 100%; background: rgb(238, 241, 246)"
          ></div>

          <el-tabs type="border-card" :stretch="true">
            <el-tab-pane label="模板">
              <el-card shadow="hover" :body-style="cardStyle">单选题</el-card>
              <el-card shadow="hover" :body-style="cardStyle">多选题</el-card>
              <el-card shadow="hover" :body-style="cardStyle">判断题</el-card>
              <el-card shadow="hover" :body-style="cardStyle">填空题</el-card>
              <el-card shadow="hover" :body-style="cardStyle">简答题</el-card>
            </el-tab-pane>
            <el-tab-pane label="题库">
              <el-table
                :data="questionData"
                :show-header="false"
                @row-click="onAddQueClick"
              >
                <el-table-column prop="type">
                  <template #default="{ row }">
                    <el-tag size="mini">{{ questionType[row.type] }}</el-tag>
                    {{ row.detail }}
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="type" width="24"></el-table-column>
                <el-table-column prop="detail" width="140"></el-table-column> -->
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-aside>
        <el-main>
          <el-card shadow="hover" :body-style="cardStyle">
            <span style="font-size: large; text-shadow: 1px">
              {{ paper.title }}
            </span>
          </el-card>
          <el-card shadow="hover" :body-style="cardStyle">
            {{ paper.remark }}
          </el-card>
          <el-card
            v-for="(q, i) in paperQuestionDVData"
            :key="q.id"
            shadow="hover"
            :body-style="cardStyle"
            style="text-align: left"
          >
            {{ i + 1 }} .
            <el-tag>[{{ questionType[q.question.type] }}]</el-tag>
            {{ q.question.detail }}
            <el-tag type="info" style="margin-right: 60dpx">
              {{ q.question.level }}
            </el-tag>
            <el-tag type="info" style="margin-right: 60dpx">
              分值{{ q.question.score }}
            </el-tag>

            <el-button-group style="float: right">
              <el-button
                size="small"
                icon="el-icon-upload2"
                circle
                @click="upIdx(q)"
              ></el-button>
              <el-button
                size="small"
                icon="el-icon-download"
                circle
                @click="downIdx(q)"
              ></el-button>
              <el-button
                size="small"
                icon="el-icon-delete"
                circle
                @click="remove(q)"
              ></el-button>
              <el-button
                size="small"
                icon="el-icon-edit"
                circle
                @click="edit(q)"
              ></el-button>
            </el-button-group>

            <div v-if="q.question.type == 'Single'">
              <el-card
                v-for="opt in q.questionOption"
                :key="opt.id"
                shadow="hover"
                class="elcardoption"
                :body-style="cardStyleOption"
              >
                <el-row justify="space-between">
                  <i v-if="opt.correct" class="el-icon-success"></i>
                  <i v-if="!opt.correct" class="el-icon-minus"></i>
                  {{ String.fromCharCode(opt.idx + 64) }}
                  {{ opt.content }}
                </el-row>
              </el-card>
            </div>

            <div v-if="q.question.type == 'Multi'">
              <el-card
                v-for="opt in q.questionOption"
                :key="opt.id"
                shadow="hover"
                class="elcardoption"
                :body-style="cardStyleOption"
              >
                <el-row justify="space-between">
                  <i v-if="opt.correct" class="el-icon-success"></i>
                  <i v-if="!opt.correct" class="el-icon-minus"></i>

                  <!-- <el-checkbox checked="opt.correct"></el-checkbox> -->

                  {{ String.fromCharCode(opt.idx + 64) }}
                  {{ opt.content }}
                </el-row>
              </el-card>
            </div>

            <div v-if="q.question.type == 'Judge'">
              <el-card
                v-for="opt in q.questionOption"
                :key="opt.id"
                shadow="hover"
                class="elcardoption"
                :body-style="cardStyleOption"
              >
                <el-row justify="space-between">
                  <i v-if="opt.correct" class="el-icon-success"></i>
                  <i v-if="!opt.correct" class="el-icon-minus"></i>

                  <!-- <el-checkbox checked="opt.correct"></el-checkbox> -->

                  {{ String.fromCharCode(opt.idx + 64) }}
                  {{ opt.content }}
                </el-row>
              </el-card>
            </div>

            <div
              v-if="
                q.question.type == 'Completion' ||
                q.question.type == 'FreeResponse'
              "
            >
              <el-input
                v-model="q.question.answerContent"
                type="textarea"
                :rows="q.question.type == 'Completion' ? 1 : 3"
                placeholder="请输入内容"
              >
                >
              </el-input>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
    <PaperEdit ref="edit" :id-key="idkey" @fetch-data="fetchData"></PaperEdit>
    <edit ref="qedit" :id-key="idkey" @fetch-data="fetchData"></edit>
  </div>
</template>

<script>
  import * as api from '/src/api/paperManagement'
  import * as qapi from '/src/api/questionManagement'
  import PaperEdit from './components/PaperEdit.vue'
  import { defaultPageSize } from '/src/config'
  import { QuestionType } from '/src/data/question'
  import { paperQuestionMvTo } from '/src/api/paperManagement'
  import Edit from '@/views/questionManagement/components/ManagementEdit'
  export default {
    name: 'Management',
    components: { PaperEdit, Edit },
    data() {
      return {
        questionType: QuestionType,
        idkey: 'id',
        list: null,
        questionData: [],
        cardStyle: { padding: '15px' },
        cardStyleOption: { padding: '5px' },
        paper: {},
        paperQuestionDVData: [],
      }
    },

    created() {
      this.fetchData()
    },
    methods: {
      async remove(qdv) {
        await api.removePaperQuestion(qdv.id)
        this.fetchData()
      },
      async upIdx(qdv) {
        await api.paperQuestionMvTo(qdv.id, qdv.idx - 1)
        this.fetchData()
      },
      async downIdx(qdv) {
        await api.paperQuestionMvTo(qdv.id, qdv.idx + 1)
        this.fetchData()
      },
      edit(qDv) {
        this.$refs['qedit'].showEdit(qDv.question)
      },
      release() {
        this.$refs['edit'].showEdit(this.paper)
      },
      async onAddQueClick(row, column, event) {
        console.log(row)
        const qresp = await api.addQuestion(this.$route.params.id, row)
        this.fetchData()
      },

      async fetchData() {
        const qresp = await qapi.getAll({})
        this.questionData = qresp.data
        let resp = await api.get(this.$route.params.id)
        this.paper = resp.data
        resp = await api.getPaperQuestionData(this.$route.params.id)
        this.paperQuestionDVData = resp.data
        console.log(this.paperQuestionDVData)
      },
    },
  }
</script>
<style scoped>
  .el-header {
    background-color: #fff;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
  .el-card {
    text-align: center;
    margin: 5px;
  }
  .elcardoption {
    width: 350px;
    text-align: left;
  }
</style>
